/**
 * 纯市场数据仪表盘（需要登录访问）
 * 设计原则：展示公开市场数据，与用户账户、持仓、盈亏完全解耦
 */

import React, { useState, useEffect } from 'react';
import IndexCardList from '@features/market/components/IndexCardList';
import IndexChart from '@features/market/components/IndexChart';
import IndexSelector from '@features/market/components/IndexSelector';
import GlobalIndexList from '@features/market/components/GlobalIndexList';
import { getChinaMarketStatus, formatMarketStatus } from '@shared/utils/marketStatus';

const Dashboard: React.FC = () => {
  const [selectedIndex, setSelectedIndex] = useState('000001.SH'); // 默认选择上证指数
  const [selectedPeriod, setSelectedPeriod] = useState('5m'); // 默认5分钟
  const [marketStatus, setMarketStatus] = useState(getChinaMarketStatus());

  // 定期更新市场状态
  useEffect(() => {
    const interval = setInterval(() => {
      setMarketStatus(getChinaMarketStatus());
    }, 60000); // 每分钟更新一次市场状态

    return () => clearInterval(interval);
  }, []);

  return (
    <div className="min-h-screen bg-gray-50 p-6">
      {/* Header */}
      <div className="bg-white rounded-lg shadow-md p-5 mb-6 flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-semibold text-gray-800 mb-2">
            📊 市场看板
          </h1>
          <p className="text-sm text-gray-600">
            {new Date().toLocaleDateString('zh-CN', {
              year: 'numeric',
              month: 'long',
              day: 'numeric',
              weekday: 'long',
            })}
          </p>
        </div>
        <div className="flex items-center gap-3">
          <div
            className={`px-4 py-2 rounded-full text-sm font-medium ${
              marketStatus === 'trading'
                ? 'bg-green-50 border border-green-200 text-green-600'
                : marketStatus === 'pre_market'
                ? 'bg-yellow-50 border border-yellow-200 text-yellow-600'
                : 'bg-gray-50 border border-gray-200 text-gray-500'
            }`}
          >
            {marketStatus === 'trading' ? '🟢' : marketStatus === 'pre_market' ? '🟡' : '⚫'}{' '}
            {formatMarketStatus(marketStatus)}
          </div>
        </div>
      </div>

      {/* [1] 顶部：国内主要指数卡片 */}
      <div className="bg-white rounded-lg shadow-md p-5 mb-6">
        <h2 className="text-lg font-semibold text-gray-800 flex items-center gap-2 mb-4">
          📈 国内市场
        </h2>
        <IndexCardList
          codes={['000001.SH', '399001.SZ', '399006.SZ', 'HSI']}
          onIndexClick={(code) => setSelectedIndex(code)}
        />
      </div>

      {/* [2] 主要指数走势图 */}
      <div className="mb-6">
        <div className="bg-white rounded-lg shadow-md p-4 mb-4">
          <IndexSelector
            selectedIndex={selectedIndex}
            selectedPeriod={selectedPeriod}
            onIndexChange={setSelectedIndex}
            onPeriodChange={setSelectedPeriod}
          />
        </div>
        <IndexChart code={selectedIndex} period={selectedPeriod} height={400} />
      </div>

      {/* [3] 全球主要指数 */}
      <div className="mb-6">
        <GlobalIndexList />
      </div>

      {/* 页脚说明 */}
      <div className="mt-6 bg-gray-100 rounded-lg p-4 text-center text-sm text-gray-500">
        <div>💡 数据仅供参考，不构成投资建议</div>
        <div className="mt-1">
          数据来源：公开市场数据 | 更新频率：{marketStatus === 'trading' ? '30秒' : '实时'}
        </div>
      </div>
    </div>
  );
};

export default Dashboard;
